<template>
    <div class="container">
        <img src="../assets/Login/u1.png" class="LeftImg">
        <img src="../assets/Login/u2.png" class="RightImg">
        <div class="content">
            <img src="../assets//Login/u3.png">
            <p>欢迎使用清运管家</p>
            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="username"
                    placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div>
                    <van-button round block type="primary" native-type="submit" class="btn">登录</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { 
    goLogin
} from '@/api/Login';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
const router = useRouter()
let username = ref('');
let password = ref('');
const onSubmit = async (v) => {
    let LoginData = {
        username:v.username,
        password:v.password
    }
    // 登录接口
    try{
        const res = await goLogin(LoginData)
        if(res.data.code == 200){
            showToast('登录成功')
            sessionStorage.setItem('token',res.data.dataset.token)
            sessionStorage.setItem('username',res.data.dataset.user.username)
            sessionStorage.setItem('time',res.data.dataset.user.registertime)
            setTimeout(()=>{
                router.push({
                    path:'/HomePage'
                })
            },1000)
        }else{
            showToast('用户名或密码错误')
        }
    }catch(error){}
};
</script>

<style lang="less" scoped>
html,body,#app,.container{
  height:100vh;
}
.container{
    position: relative;
    .LeftImg{
        position: absolute;
        top:0;
        left:0;
        width:70vw;
    }
    .RightImg{
        position: absolute;
        bottom:0;
        right:0;
        width:70vw;
    }
    .content{
        width:100vw;
        height:100vh;
        box-sizing: border-box;
        padding:15em 10em;
        display: flex;
        flex-direction: column;
        gap:8em;
        img{
            width:20vw;
        }
        p{
            font-weight: bold;
            font-size: 1.2rem;
        }
        .van-cell{
            background: none;
            color:#797979;
            border-bottom: 1px solid #797979;
            padding:0;
            padding-bottom: 0.2em;
            margin-top: 1em;
        }
        :deep(.btn){
            margin:0 auto;
            margin-top: 7em;
            background-color: #2158E9;
            color:#fff;
            width:55vw;
            
        }
    }
}
</style>